<!--
 * @Description:: 请补充填写
 * @Version: 请配置版本号
 * @Author: xiaobai
 * @Date: 2021-06-11 13:41:43
 * @LastEditors: smallWhite
 * @LastEditTime: 2024-05-10 17:17:43
 * @FilePath: /huizhou_website/src/views/project/components/project_index_a.vue
-->
<template>
  <div
    class="mt-10 project_project">
    <div
      class="project_project_a"
      v-if="!show">
      <img v-if="loading"
        class="loading_img"
        src="../../../assets/imgaes/loading.7.gif">
      <el-row v-else
        :gutter="20">
        <template
          v-if="resourcesDtoList.length >0">
          <el-col :sm="12"
            :md="8" :lg="8"
            v-for="(item,index) in resourcesDtoList"
            :key="index">
            <div
              @click="gotoDetails(item)"
              class="project_box project_box_a">
              <div
                class="el-image project_img">
                <img
                  :src="item.imgUrl"
                  class="el-image__inner">
              </div>
              <div
                class="img_bg">
                <div
                  class="card_text">
                  <div>
                    {{item.name}}
                  </div>
                </div>
                <div
                  class="more_btn">
                  查看详情>></div>
              </div>
            </div>
          </el-col>
        </template>
        <div v-else>
          <el-empty
            description="暂无数据" />
        </div>
      </el-row>
    </div>
    <Details @goback="goback"
      v-if="show"
      :details="details">
    </Details>
  </div>
</template>

<script>
import axios from 'axios'
import Details from './details.vue'
export default {
  components: { Details },
  data() {
    return {
      loading: true,
      resourcesDtoList: [],
      details: {},
      show: false
    }
  },
  mounted() {
    const id = this.$route.query.id
    if (id) {
      this.show = true
      this.getListes(id)
    } else {
      this.getList()
    }
  },
  methods: {
    getList() {
      const id = this.$store.state.navList[5].children[1].id
      axios.post('/home/engineering/case', { projectId: id }).then(res => {
        this.loading = false
        this.resourcesDtoList = res.data.data.resourcesDtoList
        this.resourcesDtoList.map(item => {
          this.$set(item, 'imgUrl', res.data.data.imgUrl + '/' + item.url)
        })
      })
    },
    getListes(e) {
      this.details = {}
      const id = this.$store.state.navList[5].children[1].id
      axios.post('/home/engineering/case', { projectId: id }).then(res => {
        this.loading = false
        this.resourcesDtoList = res.data.data.resourcesDtoList
        this.resourcesDtoList.map(item => {
          this.$set(item, 'imgUrl', res.data.data.imgUrl + '/' + item.url)
        })
        const aa = this.resourcesDtoList.filter(item => {
          return item.id == e
        })
        this.details = aa[0]
      })
    },
    goback() {
      this.show = false
      this.details = {}
    },
    gotoDetails(item) {
      this.show = true
      this.details = item
      console.log(item)
    }
  }
}
</script>

<style>
.project_box_a {
  padding: 0;
  margin: 10px auto;
}
</style>